<template>
    <el-row>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
            <el-form-item label="级别名称" prop="nickname">
                <el-input v-model="queryParams.levelName" placeholder="请输入名称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" size="small" @click="queryList">搜索</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button class="insertButton" type="primary" icon="Plus" size="small" @click="insertEdit">添加级别</el-button>
        </el-col>
    </el-row>
    <el-row v-loading="loading">
        <el-table :data="tableData">
            <el-table-column label="序号" type="index" width="80" align="center" />
            <el-table-column prop="levelName" label="级别名称" align="center" />
            <el-table-column prop="levelStatus" label="状态" align="center" :formatter="formatStats"/>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="primary" size="small" icon="Edit" round
                        @click="updateEdit(scope.row.id)">修改</el-button>
                    <el-button type="danger" size="small" icon="Delete" round
                        @click="deleteUser(scope.row.id)">删除</el-button>
                        <el-button type="success" size="small" icon="Edit" round
                        @click="updateMod(scope.row.id)">护理内容配置</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- v-model 组件里面的数据修改 外面的 queryParams.current 改变，tableData也会改变 -->
        <el-pagination layout="sizes ,prev, pager, next, jumper, ->, total," :total="queryParams.total"
            v-model:page-size="queryParams.size" v-model:current-page="queryParams.current" @current-change="queryList"
            @size-change="queryList" :page-sizes="[2, 3, 5, 10, 20]" />
    </el-row>
    <el-dialog v-model="showEdit" title="级别编辑" style="width: 600px;">
        <Edit v-if="showEdit" :closeEdit="closeEdit" :editId="editId" />
    </el-dialog>
    <el-dialog v-model="showMod" title="护理内容配置" style="width: 886px;">
        <Mod v-if="showMod" :closeMod="closeMod" :modId="modId" />
    </el-dialog>
</template>

<script setup name="careLevel">
import { onMounted } from 'vue'
import { ref } from 'vue'
// 导出添加信息组件

import Edit from './edit.vue'
import Mod from './mod.vue'
import { listInfo, removeById } from '@/api/CareManagement/careLevel/index';

import { ElMessageBox, ElNotification } from 'element-plus';
// 定义加载状态
const loading = ref(false)

// 表格数据 
const tableData = ref([])
const queryParams = ref({
    id: '',
    current: 1,
    size: 5,
    total: 0
})
const formatStats = (row, column, cellValue) => {
    return cellValue === 1 ? '启用' : cellValue === 2 ? '禁用' : '';
};
async function queryList() {
    loading.value = true;
    try {
        const page = await listInfo({
            ...queryParams.value, // 确保 levelName 参数被传递
            id: queryParams.value.id, // 明确传递 levelName 参数
        }); 
        loading.value = false;
        tableData.value = page.records; 
        queryParams.value.total = page.total;
    } catch (e) {
        loading.value = true;   
    }
}


// 是否展示修改 的表单
const showEdit = ref(false)

const showMod = ref(false)

// 关闭添加子组件页面 因为组件中需要有cancleEdit方法 所以加入query参数 true时刷新 false时不刷新
const closeEdit = (query) => {
    // 保存后关闭添加子组件页面 并重新查询
    showEdit.value = false;
    if (query) {
        queryList();
    }
}
const closeMod = (query) => {
    // 保存后关闭添加子组件页面 并重新查询
    showMod.value = false;
    if (query) {
        queryList();
    }
}

// 点击修改按钮 将数值传入closeEdit方法 而后获得userid进行修改
// 待修改的用户editId
const editId = ref(0);
const modId = ref(0);
// 新增按钮跳转到子组件 不附带属性
const insertEdit = (id) => {
    // 赋值
    editId.value = 0;
    showEdit.value = true;
}

// 修改按钮跳转到子组件 并附带userid属性
const updateEdit = (id) => {
    // 赋值
    editId.value = id;
    showEdit.value = true;
}
const updateMod = (id) => {
    // 赋值
    modId.value = id;
    showMod.value = true;
}
// 删除按钮 调用删除方法
const deleteUser = (id) => {
    ElMessageBox.confirm(
        '是否确认删除该等级信息?',
        'Warning',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            removeById(id).then(success => {
                ElNotification({
                    title: '消息',
                    type: 'success',
                    message: "删除成功",
                })
                queryList();
            })
        })
}

// 加载当前页面完成之后查询
onMounted(() => {
    queryList()
})
</script>




<style scoped></style>



